<template>
  <div class="classroom-layout">
    <!-- 顶部导航 -->
    <div class="classroom-header">
      <div class="header-content">
        <div class="header-left">
          <el-button text @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            返回课堂
          </el-button>
          <div class="breadcrumb">
            <span>智能课堂</span>
            <el-icon><ArrowRight /></el-icon>
            <span>{{ currentCourse?.title || '课程详情' }}</span>
          </div>
        </div>
        
        <div class="header-right">
          <el-button @click="toggleNotes">
            <el-icon><EditPen /></el-icon>
            笔记
          </el-button>
          <el-button @click="toggleBookmark">
            <el-icon><Star /></el-icon>
            收藏
          </el-button>
          <el-button @click="shareContent">
            <el-icon><Share /></el-icon>
            分享
          </el-button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="classroom-main">
      <!-- 左侧：视频播放器和课程内容 -->
      <div class="main-content">
        <!-- 视频播放器 -->
        <div class="video-section">
          <GlobalVideoPlayer
            :src="currentVideo?.url"
            :poster="currentVideo?.poster"
            @timeupdate="handleVideoProgress"
            @ended="handleVideoEnded"
          />
          
          <!-- 视频信息 -->
          <div class="video-info">
            <h2>{{ currentVideo?.title }}</h2>
            <div class="video-meta">
              <span class="duration">时长: {{ currentVideo?.duration }}</span>
              <span class="views">观看: {{ currentVideo?.views }}次</span>
              <span class="updated">更新: {{ formatDate(currentVideo?.updatedAt) }}</span>
            </div>
          </div>
        </div>

        <!-- 课程描述 -->
        <div class="course-description">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="课程介绍" name="description">
              <div class="description-content">
                <h3>课程简介</h3>
                <p>{{ currentCourse?.description }}</p>
                
                <h3>学习目标</h3>
                <ul>
                  <li v-for="goal in currentCourse?.goals" :key="goal">{{ goal }}</li>
                </ul>
                
                <h3>适合人群</h3>
                <p>{{ currentCourse?.audience }}</p>
              </div>
            </el-tab-pane>
            
            <el-tab-pane label="课程目录" name="catalog">
              <div class="catalog-content">
                <div 
                  v-for="(chapter, index) in courseChapters" 
                  :key="chapter.id"
                  class="chapter-item"
                >
                  <div class="chapter-header" @click="toggleChapter(index)">
                    <el-icon>
                      <ArrowDown v-if="chapter.expanded" />
                      <ArrowRight v-else />
                    </el-icon>
                    <span>第{{ index + 1 }}章 {{ chapter.title }}</span>
                    <span class="chapter-duration">({{ chapter.duration }})</span>
                  </div>
                  
                  <div v-show="chapter.expanded" class="chapter-videos">
                    <div 
                      v-for="video in chapter.videos" 
                      :key="video.id"
                      class="video-item"
                      :class="{ 
                        active: video.id === currentVideo?.id,
                        completed: video.completed 
                      }"
                      @click="playVideo(video)"
                    >
                      <el-icon class="video-status">
                        <CircleCheck v-if="video.completed" />
                        <VideoPlay v-else />
                      </el-icon>
                      <span class="video-title">{{ video.title }}</span>
                      <span class="video-duration">{{ video.duration }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            
            <el-tab-pane label="课程资料" name="materials">
              <div class="materials-content">
                <div 
                  v-for="material in courseMaterials" 
                  :key="material.id"
                  class="material-item"
                >
                  <el-icon class="material-icon">
                    <Document v-if="material.type === 'document'" />
                    <Picture v-if="material.type === 'image'" />
                    <VideoPlay v-if="material.type === 'video'" />
                    <Link v-if="material.type === 'link'" />
                  </el-icon>
                  <div class="material-info">
                    <div class="material-title">{{ material.title }}</div>
                    <div class="material-desc">{{ material.description }}</div>
                  </div>
                  <el-button size="small" @click="downloadMaterial(material)">
                    下载
                  </el-button>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <!-- 右侧：课程信息和工具 -->
      <div class="sidebar">
        <!-- 课程进度 -->
        <div class="progress-card">
          <h3>学习进度</h3>
          <div class="progress-info">
            <el-progress 
              :percentage="courseProgress" 
              :stroke-width="8"
              :show-text="false"
            />
            <div class="progress-text">
              <span>{{ courseProgress }}%</span>
              <span>{{ completedVideos }}/{{ totalVideos }} 已完成</span>
            </div>
          </div>
        </div>

        <!-- 讲师信息 -->
        <div class="instructor-card">
          <h3>讲师介绍</h3>
          <div class="instructor-info">
            <el-avatar :size="60" :src="instructor?.avatar">
              {{ instructor?.name?.charAt(0) }}
            </el-avatar>
            <div class="instructor-details">
              <div class="instructor-name">{{ instructor?.name }}</div>
              <div class="instructor-title">{{ instructor?.title }}</div>
              <div class="instructor-stats">
                <span>{{ instructor?.courses }}门课程</span>
                <span>{{ instructor?.students }}名学员</span>
              </div>
            </div>
          </div>
          <p class="instructor-bio">{{ instructor?.bio }}</p>
        </div>

        <!-- 相关推荐 -->
        <div class="recommendations-card">
          <h3>相关推荐</h3>
          <div class="recommendation-list">
            <div 
              v-for="course in recommendedCourses" 
              :key="course.id"
              class="recommendation-item"
              @click="viewCourse(course)"
            >
              <img :src="course.cover" :alt="course.title" />
              <div class="recommendation-info">
                <div class="recommendation-title">{{ course.title }}</div>
                <div class="recommendation-meta">
                  <span>{{ course.instructor }}</span>
                  <span>{{ course.students }}人学习</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 笔记抽屉 -->
    <el-drawer
      v-model="showNotes"
      title="学习笔记"
      direction="rtl"
      size="400px"
    >
      <div class="notes-content">
        <el-input
          v-model="newNote"
          type="textarea"
          :rows="4"
          placeholder="记录你的学习心得..."
          @keyup.ctrl.enter="addNote"
        />
        <el-button type="primary" @click="addNote" style="margin-top: 12px;">
          添加笔记
        </el-button>
        
        <div class="notes-list">
          <div 
            v-for="note in notes" 
            :key="note.id"
            class="note-item"
          >
            <div class="note-content">{{ note.content }}</div>
            <div class="note-meta">
              <span>{{ formatDate(note.createdAt) }}</span>
              <el-button text size="small" @click="deleteNote(note.id)">
                删除
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { 
  ArrowLeft, ArrowRight, ArrowDown, EditPen, Star, Share,
  VideoPlay, CircleCheck, Document, Picture, Link
} from '@element-plus/icons-vue'
import GlobalVideoPlayer from '@/components/global/GlobalVideoPlayer.vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

// 响应式数据
const activeTab = ref('description')
const showNotes = ref(false)
const newNote = ref('')
const notes = ref([])

// 模拟数据
const currentCourse = ref({
  id: 1,
  title: 'Vue3 + TypeScript 实战开发',
  description: '本课程将带你深入学习Vue3和TypeScript的核心概念和实战应用...',
  goals: [
    '掌握Vue3 Composition API的使用',
    '学会TypeScript在Vue项目中的应用',
    '了解Vue3生态系统和最佳实践'
  ],
  audience: '适合有一定JavaScript基础，想要学习Vue3和TypeScript的开发者'
})

const currentVideo = ref({
  id: 1,
  title: 'Vue3 介绍和环境搭建',
  url: '/videos/vue3-intro.mp4',
  poster: '/images/video-poster.jpg',
  duration: '15:30',
  views: 1250,
  updatedAt: new Date('2024-01-15')
})

const courseChapters = ref([
  {
    id: 1,
    title: 'Vue3 基础',
    duration: '2小时30分',
    expanded: true,
    videos: [
      { id: 1, title: 'Vue3 介绍和环境搭建', duration: '15:30', completed: true },
      { id: 2, title: 'Composition API 基础', duration: '25:45', completed: false },
      { id: 3, title: '响应式系统原理', duration: '20:15', completed: false }
    ]
  },
  {
    id: 2,
    title: 'TypeScript 集成',
    duration: '1小时45分',
    expanded: false,
    videos: [
      { id: 4, title: 'TypeScript 基础回顾', duration: '18:20', completed: false },
      { id: 5, title: 'Vue3 + TypeScript 配置', duration: '22:30', completed: false }
    ]
  }
])

const instructor = ref({
  name: '张老师',
  title: '高级前端工程师',
  avatar: '/images/instructor.jpg',
  courses: 15,
  students: 8500,
  bio: '拥有8年前端开发经验，专注于Vue.js生态系统和现代前端工程化...'
})

const recommendedCourses = ref([
  {
    id: 2,
    title: 'React 18 新特性详解',
    cover: '/images/course-2.jpg',
    instructor: '李老师',
    students: 3200
  },
  {
    id: 3,
    title: 'Node.js 后端开发',
    cover: '/images/course-3.jpg',
    instructor: '王老师',
    students: 2800
  }
])

const courseMaterials = ref([
  {
    id: 1,
    title: 'Vue3 官方文档',
    description: 'Vue3 官方中文文档链接',
    type: 'link'
  },
  {
    id: 2,
    title: '课程源码',
    description: '本课程完整源码下载',
    type: 'document'
  }
])

// 计算属性
const courseProgress = computed(() => {
  const total = courseChapters.value.reduce((sum, chapter) => sum + chapter.videos.length, 0)
  const completed = courseChapters.value.reduce((sum, chapter) => 
    sum + chapter.videos.filter(v => v.completed).length, 0
  )
  return total > 0 ? Math.round((completed / total) * 100) : 0
})

const completedVideos = computed(() => {
  return courseChapters.value.reduce((sum, chapter) => 
    sum + chapter.videos.filter(v => v.completed).length, 0
  )
})

const totalVideos = computed(() => {
  return courseChapters.value.reduce((sum, chapter) => sum + chapter.videos.length, 0)
})

// 方法
const goBack = () => {
  router.push('/classroom')
}

const toggleChapter = (index) => {
  courseChapters.value[index].expanded = !courseChapters.value[index].expanded
}

const playVideo = (video) => {
  currentVideo.value = video
}

const toggleNotes = () => {
  showNotes.value = !showNotes.value
}

const toggleBookmark = () => {
  ElMessage.success('已收藏课程')
}

const shareContent = () => {
  ElMessage.success('分享链接已复制到剪贴板')
}

const addNote = () => {
  if (newNote.value.trim()) {
    notes.value.unshift({
      id: Date.now(),
      content: newNote.value,
      createdAt: new Date()
    })
    newNote.value = ''
    ElMessage.success('笔记添加成功')
  }
}

const deleteNote = (id) => {
  const index = notes.value.findIndex(n => n.id === id)
  if (index > -1) {
    notes.value.splice(index, 1)
    ElMessage.success('笔记删除成功')
  }
}

const downloadMaterial = (material) => {
  ElMessage.success(`正在下载：${material.title}`)
}

const viewCourse = (course) => {
  router.push(`/classroom/course/${course.id}`)
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

const handleVideoProgress = (currentTime) => {
  // 记录学习进度
}

const handleVideoEnded = () => {
  // 标记视频为已完成
  if (currentVideo.value) {
    const chapter = courseChapters.value.find(c => 
      c.videos.some(v => v.id === currentVideo.value.id)
    )
    if (chapter) {
      const video = chapter.videos.find(v => v.id === currentVideo.value.id)
      if (video) {
        video.completed = true
        ElMessage.success('视频学习完成！')
      }
    }
  }
}

onMounted(() => {
  // 根据路由参数加载课程数据
  const courseId = route.params.id
  if (courseId) {
    // 加载课程数据
  }
})
</script>

<style lang="scss" scoped>
.classroom-layout {
  min-height: 100vh;
  background: var(--el-bg-color-page);
}

.classroom-header {
  background: white;
  border-bottom: 1px solid var(--el-border-color-extra-light);
  padding: 16px 0;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--el-text-color-secondary);
    font-size: 14px;
  }
}

.header-right {
  display: flex;
  gap: 12px;
}

.classroom-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 30px;
  
  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
}

.video-section {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
}

.video-info {
  padding: 20px;
  
  h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--el-text-color-primary);
  }
  
  .video-meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: var(--el-text-color-secondary);
  }
}

.course-description {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.description-content {
  h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--el-text-color-primary);
  }
  
  p {
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--el-text-color-regular);
  }
  
  ul {
    margin-bottom: 20px;
    
    li {
      margin-bottom: 8px;
      color: var(--el-text-color-regular);
    }
  }
}

.catalog-content {
  .chapter-item {
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
  }
  
  .chapter-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: var(--el-fill-color-extra-light);
    cursor: pointer;
    
    &:hover {
      background: var(--el-fill-color-light);
    }
    
    .chapter-duration {
      margin-left: auto;
      font-size: 12px;
      color: var(--el-text-color-placeholder);
    }
  }
  
  .chapter-videos {
    .video-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      cursor: pointer;
      transition: background 0.3s ease;
      
      &:hover {
        background: var(--el-fill-color-extra-light);
      }
      
      &.active {
        background: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
      }
      
      &.completed {
        .video-status {
          color: var(--el-color-success);
        }
      }
      
      .video-title {
        flex: 1;
        font-size: 14px;
      }
      
      .video-duration {
        font-size: 12px;
        color: var(--el-text-color-placeholder);
      }
    }
  }
}

.materials-content {
  .material-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    margin-bottom: 12px;
    
    .material-icon {
      font-size: 24px;
      color: var(--el-color-primary);
    }
    
    .material-info {
      flex: 1;
      
      .material-title {
        font-weight: 500;
        margin-bottom: 4px;
      }
      
      .material-desc {
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }
  }
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.progress-card,
.instructor-card,
.recommendations-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  
  h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--el-text-color-primary);
  }
}

.progress-info {
  .progress-text {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 14px;
    color: var(--el-text-color-secondary);
  }
}

.instructor-info {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  
  .instructor-details {
    flex: 1;
    
    .instructor-name {
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    .instructor-title {
      font-size: 14px;
      color: var(--el-text-color-secondary);
      margin-bottom: 8px;
    }
    
    .instructor-stats {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: var(--el-text-color-placeholder);
    }
  }
}

.instructor-bio {
  font-size: 14px;
  line-height: 1.5;
  color: var(--el-text-color-regular);
}

.recommendation-list {
  .recommendation-item {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    
    &:hover {
      .recommendation-title {
        color: var(--el-color-primary);
      }
    }
    
    img {
      width: 60px;
      height: 45px;
      border-radius: 6px;
      object-fit: cover;
    }
    
    .recommendation-info {
      flex: 1;
      
      .recommendation-title {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 4px;
        @include text-ellipsis(2);
      }
      
      .recommendation-meta {
        display: flex;
        gap: 8px;
        font-size: 12px;
        color: var(--el-text-color-placeholder);
      }
    }
  }
}

.notes-content {
  .notes-list {
    margin-top: 20px;
    
    .note-item {
      padding: 12px;
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 6px;
      margin-bottom: 12px;
      
      .note-content {
        margin-bottom: 8px;
        line-height: 1.5;
      }
      
      .note-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: var(--el-text-color-placeholder);
      }
    }
  }
}
</style>
